$(function () {

  function changeCheckStyle() {
    $('input[type=checkbox]').each(function (index, item) {
      if (item.checked) {
        $(item).addClass('checked')
      } else {
        $(item).removeClass('checked')
      }
    })
  }


  $('.card input').change(function () {
    let isEqual = $('.card input').length === $('.card input:checked').length
    $('#all-check').prop('checked', isEqual)
    changeCheckStyle()

    /*
    if ($('.card input').length === $('.card input:checked').length) {
      $('#all-check').prop('checked', true)
    } else {
      $('#all-check').prop('checked', false)
    }*/

    // console.log($('.card input').length)
    // console.log($('.card input:checked').length)
  })


  $('#reverse-check').change(function () {
    // console.log($('.card input'))
    $('.card input').each(function (index, item) {
      // console.log(index, item)
      // item.checked = !item.checked
      $(item).prop('checked', !$(item).prop('checked'))
    })

    changeCheckStyle()
  })

  $('#all-check').change(function () {
    // let isChecked = $(this).prop('checked')
    let isChecked = this.checked
    $('.card input').prop('checked', isChecked)

    changeCheckStyle()
    // console.log(this.checked) // js
    // console.log($(this).prop('checked'))
    // console.log($(this).attr('checked'))
  })




})

